<template>
	<div id="LotteryManage">
		<ul>
			<!--已经上传的信息-->
			<li class="game" v-for='(item,key) in allGames'
				:key='key'	
			>
				<img :src='"http://192.168.2.245:3000"+item.icon2' alt="损坏">
				<span>{{item.cn}}</span>
			</li>
			<!--添加的图片-->
			<li class="uploadRound" @click='showAddView=true'>
				<i class="el-icon-plus" style="font-size:30px ;"> </i>
			</li>
		</ul>
		
		<add-new-game-view :showAddView='showAddView'></add-new-game-view>
		
	</div>
</template>


<script>
	import AddNewGameView from './AddNewGameView'
	export default{
		components:{AddNewGameView},
		data(){
			return {
				gameList:[],
				showAddView:false,
				
			}
		},
		
		computed:{
			allGames(){
				return this.$store.getters.allGames;	
			}
		},
		created(){
			this.$store.dispatch('loadAllGames',{api:this.$apis.allGames})
		}
	}
</script>

<style lang="scss" scoped>
	#LotteryManage{
		width: 100%;
		height: 100%;
		background: white;
		ul{
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			li{
				width: 90px;
				height: 90px;
				margin-left:20px ;
				margin-top: 20px;
			}
		}
	}
	
	.game{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items:center;
	}
	.uploadRound{
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed black;
	}
</style>